<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 适配移动端显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiniWebSvr - 首页</title>
    <style>
        /* 简单样式优化，提升页面可读性 */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
            line-height: 1.6;
        }
        .section {
            margin: 2rem 0;
            padding: 1.5rem;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        h2 {
            color: #34495e;
            border-bottom: 2px solid #3498db;
            padding-bottom: 0.5rem;
        }
        .btn {
            padding: 0.5rem 1rem;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background: #2980b9;
        }
        input[type="text"] {
            padding: 0.5rem;
            width: 200px;
            margin-right: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        a {
            color: #3498db;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!-- 首页标题 -->
<h1>Welcome to MiniWebSvr</h1>
<p style="text-align: center; color: #7f8c8d;">轻量级Web服务器测试首页</p>

<!-- 1. 服务器时间查询（对应 TimeHandler） -->
<div class="section">
    <h2>1. 查看服务器当前时间</h2>
    <p>点击下方链接，获取服务器实时时间（由 TimeHandler 处理）：</p>
    <!-- 假设 Router 配置了 "/time" 路径映射到 TimeHandler -->
    <a href="/time" class="btn">查询服务器时间</a>
</div>

<!-- 2. 参数回显测试（对应 EchoHandler，覆盖 GET/POST 两种请求） -->
<div class="section">
    <h2>2. 测试参数回显（由 EchoHandler 处理）</h2>

    <!-- GET 请求测试：参数会拼在 URL 中（对应 HttpParser 解析 URL 参数） -->
    <div style="margin-bottom: 1.5rem;">
        <h3>GET 请求测试</h3>
        <p>输入参数，提交后会在 URL 中显示参数（如 ?name=xxx&age=xxx）：</p>
        <form action="/echo" method="GET">
            <input type="text" name="name" placeholder="请输入姓名" required>
            <input type="text" name="age" placeholder="请输入年龄" required>
            <button type="submit" class="btn">提交 GET 请求</button>
        </form>
    </div>

    <!-- POST 请求测试：参数在请求体中（对应 HttpParser 解析 Body 参数） -->
    <div>
        <h3>POST 请求测试</h3>
        <p>输入参数，提交后参数在请求体中（URL 无参数）：</p>
        <form action="/echo" method="POST">
            <input type="text" name="username" placeholder="请输入用户名" required>
            <input type="text" name="email" placeholder="请输入邮箱" required>
            <button type="submit" class="btn">提交 POST 请求</button>
        </form>
    </div>
</div>

<!-- 3. 静态资源说明（对应 DefaultHandler） -->
<div class="section">
    <h2>3. 静态资源访问说明</h2>
    <p>当前页面由 <code>DefaultHandler</code> 处理（Web根目录下的 index.html）</p>
    <p>若需测试其他静态资源（如图片、CSS），可将文件放入 Web 根目录，直接通过 URL 访问（如 /images/logo.png）</p>
</div>
</body>
</html>